<template>
  <div>
    <div class="bread" style="margin-bottom: 30px;">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '#' }" style="font-size: 20px;"
          >首页</el-breadcrumb-item
        >
        <el-breadcrumb-item style="font-size: 20px;"
          >类别管理</el-breadcrumb-item
        >
        <el-breadcrumb-item style="font-size: 20px;"
          >展示类别</el-breadcrumb-item
        >
      </el-breadcrumb>
    </div>

    <el-col style="margin-left:50px;" :span="2" :offset="1">
      <el-select
        @change="listBookTypes"
        v-model="typeState"
        clearable
        placeholder="类别状态"
      >
        <el-option
          v-for="item in options"
          :key="item.state"
          :label="item.label"
          :value="item.state"
        >
        </el-option>
      </el-select>
    </el-col>
    <el-col :span="2" :offset="1">
      <el-cascader
        style="margin-left: -30px;"
        @expand-change="change"
        @change="listBookTypes"
        v-model="parentId"
        placeholder="父级类别"
        :options="allBookTypes"
        :props="props"
        clearable
      ></el-cascader>
    </el-col>

    <div ref="table" style="margin-top: 100px;">
      <el-table
        :data="page.list"
        border
        style="width: 1300px;margin-left: 50px;margin-top: 20px;"
        :stripe="true"
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
      >
        <!-- <el-table-column fixed prop="id" type="selection" label="楼宇id" width="150">
        </el-table-column> -->
        <el-table-column prop="typeName" label="类型名" width="350">
        </el-table-column>
        <el-table-column prop="parentTypeName" label="父级类名" width="350">
        </el-table-column>
        <!-- <el-table-column prop="accountState" label="账号状态" width="320">
        </el-table-column> -->
        <el-table-column label="类别状态" width="350">
          <template slot-scope="scope">
            <span v-if="scope.row.typeState == 0"
              >正常<i style="color: limegreen;" class="el-icon-success"></i
            ></span>
            <span v-if="scope.row.typeState == 1"
              >已删除<i style="color: red;" class="el-icon-delete-solid"></i
            ></span>
            <span v-if="scope.row.typeState == 2"
              >已禁用<i style="color:chocolate;" class="el-icon-error"></i
            ></span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="260">
          <template slot-scope="scope">
            <el-button
              type="primary"
              v-if="scope.row.typeState == 0"
              icon="el-icon-edit"
              @click="handleClick(scope.row)"
              size="small"
              circle
              >修改</el-button
            >
            <!-- <el-button v-if="scope.row.typeState==0" @click="disable(scope.row.typeId)" type="danger" size="mini"
              round>禁用</el-button> -->
            <el-button
              v-if="scope.row.typeState == 0"
              @click="disable(scope.row.typeId)"
              type="warning"
              icon="el-icon-error"
              size="mini"
              round
              >禁用</el-button
            >
            <el-button
              v-if="scope.row.typeState == 2"
              @click="enable(scope.row.typeId)"
              type="success"
              size="mini"
              round
              >解禁</el-button
            >
            <el-button
              v-if="scope.row.typeState != 1"
              @click="delById(scope.row.typeId)"
              type="danger"
              icon="el-icon-delete-solid"
              round
              size="mini"
              >删除</el-button
            >
            <el-button
              v-if="scope.row.typeState == 1"
              @click="undelete(scope.row.typeId)"
              type="primary"
              icon="el-icon-refresh-left"
              round
              size="mini"
              >撤回</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-row style="margin-left: 50px;">
      <el-col :span="5">
        <el-pagination
          @size-change="pageSizeChange"
          @current-change="pageNumChange"
          :current-page="page.current"
          :page-sizes="[1, 5, 10]"
          :page-size="page.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
        >
        </el-pagination>
      </el-col>
    </el-row>

    <el-dialog :visible.sync="showUpdateWindow" width="30%">
      <template slot="title">
        <div style="font-size:18px;font-weight: 999;">修改类别信息</div>
      </template>
      <div style="width: 400px;">
        <el-form
          :model="bookType"
          :rules="rules"
          ref="bookType"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="类别名" prop="typeName">
            <el-input v-model="bookType.typeName"></el-input>
          </el-form-item>
          <el-form-item label="父级类名" prop="parentId">
            <el-cascader
              @expand-change="change"
              @change="change"
              :options="bookTypes"
              :props="props"
              v-model="bookType.parentId"
              style="margin-left: -90px;"
              clearable
            ></el-cascader>
          </el-form-item>
          <el-button type="primary" @click="submitForm('bookType')"
            >立即修改</el-button
          >
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "ShowBookType",
  data() {
    return {
      bookTypes: [],
      allBookTypes: [],
      props: {
        expandTrigger: "hover",
        checkStrictly: true,
        value: "typeId",
        label: "typeName",
        children: "children"
      },
      page: {},
      typeState: null,
      parentId: null,
      showUpdateWindow: false,
      bookType: {
        typeName: "",
        parentId: []
      },
      options: [
        {
          state: "0",
          label: "正常"
        },
        {
          state: "1",
          label: "已删除"
        },
        {
          state: "2",
          label: "已禁用"
        }
      ],
      rules: {
        typeName: [
          {
            required: true,
            message: "请输入类别名",
            trigger: "blur"
          }
        ],
        parentId: [
          {
            required: true,
            message: "请选择父类别",
            trigger: "change"
          }
        ]
      }
    };
  },
  methods: {
    pageSizeChange(size) {
      this.page.current = 1;
      this.splitePage(this.page.current, size);
    },
    pageNumChange(current) {
      this.splitePage(current, this.page.size);
    },
    listBookTypes() {
      //查找全部
      //调用分页函数
      this.splitePage(this.page.current, this.page.size);
    },
    splitePage(pageNum, pageSize) {
      //分页函数
      if (this.parentId != null) {
        let num = this.parentId.length;
        this.parentId = this.parentId[num - 1];
      }
      this.$http
        .post("/bookType/admin/selectBookType", {
          pageNum: pageNum,
          pageSize: pageSize,
          typeState: this.typeState,
          parentId: this.parentId
        })
        .then(resp => {
          //将分页信息传入data区中
          this.page = resp.data.data;
          console.log(resp.data.data);
        });
    },
    handleClick(obj) {
      this.bookType = JSON.parse(JSON.stringify(obj));
      this.$http
        .get("/bookType/admin/findTypeArray?parentId=" + this.bookType.parentId)
        .then(resp => {
          console.log(resp.data.data);
          this.bookType.parentId = resp.data.data;
        });
      if (this.bookType.parentId == [0]) {
        this.bookType.parentId = [0];
      }
      this.showUpdateWindow = true;
      console.log(this.bookType);
    },
    updateBookType() {
      let num = this.bookType.parentId.length;
      this.bookType.parentId = this.bookType.parentId[num - 1];
      this.$http
        .post("/bookType/admin/updateBookType", this.bookType)
        .then(resp => {
          alert(resp.data.message);
          this.listBookTypes();
          this.listAllBookTypes();
          this.listAllNormalBookTypes();
          this.showUpdateWindow = false;
        });
    },
    listAllNormalBookTypes() {
      this.$http
        .get("/bookType/admin/selectBookTypeTree?typeState=" + 0)
        .then(resp => {
          this.bookTypes = resp.data.data;
          console.log(resp.data.data);
        });
    },
    listAllBookTypes() {
      this.$http.get("/bookType/admin/selectBookTypeTree").then(resp => {
        this.allBookTypes = resp.data.data;
      });
    },
    disable(id) {
      this.$http
        .get("/bookType/admin/disableBookType?typeId=" + id)
        .then(resp => {
          alert(resp.data.message);
          this.listBookTypes();
          this.listAllBookTypes();
          this.listAllNormalBookTypes();
        });
    },
    enable(id) {
      this.$http
        .get("/bookType/admin/enableBookType?typeId=" + id)
        .then(resp => {
          alert(resp.data.message);
          this.listBookTypes();
          this.listAllBookTypes();
          this.listAllNormalBookTypes();
        });
    },
    delById(id) {
      this.$http
        .get("/bookType/admin/deleteBookType?typeId=" + id)
        .then(resp => {
          alert(resp.data.message);
          this.listBookTypes();
          this.listAllBookTypes();
          this.listAllNormalBookTypes();
        });
    },
    undelete(id) {
      this.$http
        .get("/bookType/admin/undeleteBookType?typeId=" + id)
        .then(resp => {
          alert(resp.data.message);
          this.listBookTypes();
          this.listAllBookTypes();
          this.listAllNormalBookTypes();
        });
    },
    change(e) {
      console.log(e);
    },
    submitForm(bookType) {
      this.$refs[bookType].validate(valid => {
        if (valid) {
          let num = this.bookType.parentId.length;
          this.bookType.parentId = this.bookType.parentId[num - 1];
          this.$http
            .post("/bookType/admin/updateBookType", this.bookType)
            .then(resp => {
              alert(resp.data.message);
              this.listBookTypes();
              this.showUpdateWindow = false;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(bookType) {
      this.$refs[bookType].resetFields();
    }
  },
  created() {
    this.listBookTypes();
    this.listAllBookTypes();
    this.listAllNormalBookTypes();
    
  }
};
</script>

<style scoped>
.bread {
  margin-top: 50px;
  margin-left: 50px;
}
</style>
<style>
.el-input__inner::placeholder {
  color: #31e5f5;
}
</style>
